<template>
    <div>
        {{ xAxisData }},{{ yAxisData }}
      <!-- 统计图 -->
      <div id="classifiyStatistics"  style="width: 900px;height:600px;margin-left: 20px;"></div>
      <!-- <div class="img"></div> -->
    </div>
 </template>
   
   <script>
   import * as echarts from 'echarts';
//    import utils from "@/common/utils";
   import {
      
     onMounted,   
   
 } from "vue";
   export default {
     name: 'App',
     components: {},
     props: {
        xAxisData: { type: Array, default: () => [] },
        yAxisData:  { type: Array, default: () => [] },
     },
     setup(props) {
    
   
        var img = [
        "https://img95.699pic.com/photo/40250/3909.jpg_wh300.jpg",
        "https://img95.699pic.com/photo/40250/3909.jpg_wh300.jpg",
        "https://img95.699pic.com/photo/40250/3909.jpg_wh300.jpg",
        "https://img95.699pic.com/photo/40250/3909.jpg_wh300.jpg"];//横坐标要添加的图片
     
        onMounted(()=>{
            console.log("xAxisData",props.xAxisData);
            console.log("yAxisData",props.yAxisData);
            loadGraph()
         })
        async function loadGraph() {
             let chartDom = document.getElementById("classifiyStatistics");
             let myChart =await echarts.init(chartDom);
             let option;
             option = {
                //  title: {
                //     //  text: '{a|} 最近5个作品表现',
                //      show: true,
                //      textStyle: {
                //          lineHeight: 20,
                //          rich: {
                //              a: {
                //                  color: '#FFF',
                //                  fontSize: '20',
                //                  height: 20,
                //                  width: 20,
                //                  backgroundColor: {
                //                      image: (img[0])//自定义标题图片
                //                  }
                //              },
                //          }
                //      }
                //  },
                 tooltip: {
                     trigger: 'axis',
                 },
                //  legend: {
                //      data: ['评论数', '分享数', '点赞数']
                //  }, 
                 grid: {
                     containLabel: true
                 },
                 xAxis: [
                     {//显示日期的横坐标
                        name: '种类',
                         triggerEvent: false,
                         type: 'category',
                         data: props.xAxisData,
                         axisPointer: {
                             type: 'shadow'
                         },
                         min: 0,
                     },
                     {//显示图片的横坐标
                         type: 'category',
                         position: 'bottom',
                         min: 0,
                         offset: 25,
                         axisPointer: {
                             type: 'none'
                         },
                         axisTick: {
                             show: false
                         },
                         axisLine: {
                             show: false
                         },
                        //  triggerEvent: true,//添加点击事件
                         inverse: true,
                         data: ['img1', 'img2', 'img3', 'img4'].reverse(),
                         axisLabel: {
                             formatter: function (value) {
                                 return '{' + value + '| }\n{value|' + value + '}';
                             },
                             margin: 20,
                             rich: {
                                 value: {
                                     lineHeight: 50,
                                     align: 'center'
                                 },
                                 img1: {
                                     height: 100,
                                     width: 80,
                                     align: 'center',
                                     backgroundColor: {
                                         image: img[0]
                                     }
                                 },
                                 img2: {
                                     height: 100,
                                     width: 80,
                                     align: 'center',
                                     backgroundColor: {
                                         image: img[1]
                                     }
                                 },
                                 img3: {
                                     height: 100,
                                     width: 80,
                                     align: 'center',
                                     backgroundColor: {
                                         image: img[2]
                                     }
                                 },
                                 img4: {
                                     height: 100,
                                     width: 80,
                                     align: 'center',
                                     backgroundColor: {
                                         image: img[3]
                                     }
                                 },
                                 
                             }
                         }
                     },
                 ],
                 yAxis: 
                     {
                         type: 'value',
                         name: '人数',
                         min: 0
                     },
                    //  {
                    //      type: 'value',
                    //      name: '评论数-分享数',
                    //      min: 0
                    //  }
                 
                 series: [
                    //  {
                    //      name: '评论数',
                    //      data: props.yAxisData,
                    //      type: 'line',
                    //      yAxisIndex: 1,
                    //      smooth: true,//平滑线设置
                    //      itemStyle: {
                    //          normal: {
                    //              lineStyle: {
                    //                  color: '#0b73e3', //改变折线颜色
                    //              }
                    //          }
                    //      },
                    //  },
                    //  {
                    //      name: '分享数',
                    //      data: props.yAxisData,
                    //      type: 'line',
                    //      smooth: true,//平滑线设置
                    //      yAxisIndex: 1,
                    //      itemStyle: {
                    //          normal: {
                    //              lineStyle: {
                    //                  color: '#4af388' //改变折线颜色
                    //              }
                    //          }
                    //      },
                    //  },
                     {
                         name: '人数',
                         type: 'bar',
                         barWidth: 40,
                         yAxisIndex: 0,
                         itemStyle: {
                             normal: {
                                 color: '#13c4db' //改变折线颜色
                             }
                         },
                         data: props.yAxisData,
                         
                     },
                 ]
             };
             option && myChart.setOption(option);
         }
        //    function yAxisDatahandle(arrData, i) {
        //     console.log(arrData);
        //        let obj = {};
        //        xAxisData.value.forEach((item) => {
        //            arrData.forEach((userItem) => {
        //                if (userItem.works[i]) {
        //                    if (item == userItem.works[i].classifyName) {
        //                        if (obj[item]) {
        //                            obj[item]++;
        //                        } else {
        //                            obj[item] = 1;
        //                        }
        //                    }
        //                }
        //            });
        //            if (!obj[item]) {
        //                obj[item] = 0;
        //            }
        //        });
        //        console.log("111111111",Object.values(obj));
        //        return Object.values(obj);
        //    }
           return {
               
           }
     }
   }
   </script>
   
   <style>
   
   body {
     margin: 0;
   }
   
   </style>
   
   <style lang="less" scoped>
  
//   #classifiyStatistics {

//    vertical-align: middle;
//    padding: 20px 20px;
//    margin: 0 auto;
//  }
//  .img{
//             background-color: white;
//             width: 100%;
//             height: 15px;
//             position: absolute;
//             margin-top: -78px;
//         }
   </style>